<template>
    <view class="opportunityManage">
        <uni-nav-bar fixed left-icon="left" title="选择客户" @clickLeft="backHandle" class="unibarS">
        </uni-nav-bar>
        <uni-search-bar class="uni-mt-10" v-model="params.keyWords" bgColor="#FFFFFF" radius="5" placeholder="搜索" clearButton="auto"
            cancelButton="none" @confirm="searchHandle()" @clear="searchHandle()" />
        <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index" @click="selectHandle(item)">
                <view class="item-top">
                    <view class="item-top-left">
                        <view class="name">{{ item.customerName }}</view>
                        <view class="rate">系统编号：{{ item.customerCode }}</view>
                        <view class="time">手机号：{{ item.phoneNumber }}</view>
                    </view>
                    <view class="item-top-right">
                        <radio :value="item.id" :checked="item.id == tempObj.id" />
                    </view>
                </view>
            </view>
        </view>
        <uni-load-more :status="status" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            tempObj: {},
            params: {
                keyWords: '',
                pageNum: 1,
                pageSize: 10,
                sortKey: 'create_time',
				sortKeyValues: 'desc'
            },
            list: [],
            total: 0,
			status: 'loading'
        }
    },
    onLoad: function(option) {
        this.getData()
        const eventChannel = this.getOpenerEventChannel();
        let that = this
        // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on('emitDataHandle', function(data) {
            that.tempObj = data.data
        })
    },
    onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
        searchHandle() {
			this.params.pageNum = 1
			this.status = 'loading'
			this.list = []
			this.getData()
		},
        getData() {
			this.$http.get('/app/customer/list', this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						this.status = 'more'
					} else {
						this.status = 'noMore'
					}
					if (this.refresh) {
						uni.stopPullDownRefresh()
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
        },
        selectHandle(e) {
            this.tempObj = e
            // this.tempObj.userId = e.userId
			// this.tempObj.userName = e.userName
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('someEvent', {data: this.tempObj});
            uni.navigateBack()
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.list {
    padding: 0 32rpx;
}
.item {
    padding: 32rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 32rpx;

    .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-top-left {
            flex: 1;
            margin-right: 20rpx;
            width: 0;

            .name {
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                margin-bottom: 32rpx;
                // 超出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .rate,
            .time {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-bottom: 26rpx;
            }
        }

        .item-top-right {
            width: 150rpx;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            text-align: right;
            > view {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
            }
            .salesman {
                margin-top: 8rpx;
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                width: 100%;
                // 超出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

/deep/.uni-radio-input {
    width: 20px;
    height: 20px;
}

</style>